<template>
  <div>
    <!-- 查询参数及按钮部分 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :title="dialogStatus" :visible.sync="dialogEditFormVisible">
      <el-form ref="dataForm" class="dialog-Backgroundcolor" :model="listQuery" label-position="right"
        label-width="100px" width="50%">
        <div class="filter-container">
          <el-row>
            <el-form label-position="right" size="small">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="变动单位：">
                    <el-select v-model="listQuery.changeAgency" class="filter-item" clearable placeholder="--请选择--">
                      <el-option v-for="item in changeAgencys" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="工资类型：">
                    <el-select v-model="listQuery.salaryType" class="filter-item" clearable placeholder="--请选择--">
                      <el-option v-for="item in salaryTypes" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                  </el-form-item>
                </el-col>

              </el-row>
              <!-- <el-row>
                <el-col :span="12">
                  <el-form-item label="银行：">
                  <el-select
                    v-model="listQuery.salaCardBank"
                    clearable
                    class="filter-item"
                    placeholder="--请选择--"
                    @change="query"
                  >
                    <el-option
                      v-for="item in agencyBankLists"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                  </el-form-item>
                </el-col>
              </el-row> -->
              <el-button type="primary" style="float:right;" @click="handleQuery">
                查询
              </el-button>
            </el-form>
          </el-row>
        </div>
      </el-form>
    </el-dialog>

    <!-- 表格部分 -->
    <el-table ref="singalTable" v-loading="listLoading" :data="list" :stripe="true" fit highlight-current-row
      :height="tableHeight" :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      :summary-method="getSummaries" show-summary @selection-change="handleSelectionChange">
      <template slot="empty">
        <tableEmpty />
      </template>
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column
        label="序号"
        prop="no"
        align="center"
        width="55"

      /> -->
      <el-table-column type="index" align="center" width="55" label="序号" />
      <el-table-column label="生成状态" align="center" width="80">
        <template slot-scope="{row}">
          <span :style="{ color: row.contpay === 1 ? 'red' : 'black' }">{{ row.status | statusFilter() }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位编码" align="center" width="110">
        <template slot-scope="{row}">
          <span :style="{ color: row.contpay === 1 ? 'red' : 'black' }" style="float: right">{{ row.agencyCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center" width="500">
        <template slot-scope="{row}">
          <span :style="{ color: row.contpay === 1 ? 'red' : 'black' }" style="float: left">{{ row.agencyName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="month" label="月份" align="center" />
      <el-table-column label="批次" align="center">
        <template slot-scope="{row}">
          <span>{{ row.isThirteen | isthirteenfilter(that) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="shouldSalary" label="应发工资" align="center">
        <template slot-scope="{row}">
          <span style="float: right">{{ Number(row.shouldSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
          }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="realSalary" label="实发工资" align="center">
        <template slot-scope="{row}">
          <span style="float: right">{{ Number(row.realSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="personCount" label="人数" align="center" />
    </el-table>

    <!-- 分页 -->
    <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- <el-row v-if="tabPane === '1'">
      <span>支付申请单列表：</span>
      表格部分
      <el-table
        ref="payTable"
        v-loading="payListLoading"
        :data="payList"
        :stripe="true"
        fit
        :height="tableHeight"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <template slot="empty">
          <tableEmpty />
        </template>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80"
        />
        <el-table-column
          label="申请编号"
          prop="payAppNo"
          align="center"
        />
        <el-table-column
          label="预算单位"
          prop="agencyName"
          align="center"
          width="110"
        />
        <el-table-column
          label="指标ID"
          prop="bgtId"
          align="center"
        />
        <el-table-column
          label="指标总额度"
          width="140"
          align="center"
        >
          <template slot-scope="{row}">
            获取不带后缀的字段名
            <span style="float: right">{{ Number(row.aviamt).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="可用指标额度"
          width="140"
          align="center"
        >
          <template slot-scope="{row}">
            获取不带后缀的字段名
            <span style="float: right">{{ Number(row.canuseamt).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="申请金额"
          width="140"
          align="center"
        >
          <template slot-scope="{row}">
            获取不带后缀的字段名
            <span style="float: right">{{ Number(row.payAppAmt).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fundType"
          label="资金性质"
          width="120"
          align="center"
        />
        <el-table-column
          prop="payeeAcctName"
          label="收款人全称"
          width="120"
          align="center"
        />
        <el-table-column
          prop="payeeAcctNo"
          label="收款人账号"
          width="120"
          align="center"
        />
        <el-table-column
          prop="payeeAcctBankName"
          label="收款人开户行"
          width="120"
          align="center"
        />
        <el-table-column
          prop="payType"
          label="支付方式"
          width="120"
          align="center"
        />
        <el-table-column
          prop="payType"
          label="支付方式"
          width="120"
          align="center"
        />
        <el-table-column
          prop="proCat"
          label="项目分类"
          width="120"
          align="center"
        />
        <el-table-column
          prop="govBgtEco"
          label="政府经济分类"
          width="120"
          align="center"
        />
        <el-table-column
          prop="depBgtEco"
          label="部门经济分类"
          width="120"
          align="center"
        />
        <el-table-column
          prop="pro"
          label="预算科目"
          width="120"
          align="center"
        />
        <el-table-column
          prop="useName"
          label="资金用途"
          width="120"
          align="center"
        />
      </el-table>
    </el-row> -->
    <ApprovalProcess ref="app" />
    <uploadLoadSalary v-if="upload_load" ref="uploadLoadSuccess" :params="listQuery" :object="object"
      :api="'getProgressSalary'" @close="uploadClose" />
  </div>
</template>

<script>
import {
  queryGenerateSalaryDataPage,
  makeSalaryData,
  revokeSalaryData,
  getPayBackData,
  getBankDataStatus,
  checkSalaryData
} from '@/api/generateSalaryData/generateSalaryData'
import { getAgencyBank } from '@/api/baseInfo'
// 分页
import {
  saveMonthEndStop, checkRevokeMonthEndStop, revokeMonthEndStop
} from '@/api/financialAudit/salaryMonthEnd' // secondary package based on el-pagination
import uploadLoadSalary from './uploadLoadSalary'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'
import ApprovalProcess from '@/components/ApprovalProcess/ApprovalProcess'
export default {
  name: 'Unit',
  components: { Pagination, tableEmpty, ApprovalProcess, uploadLoadSalary },
  filters: {
    isthirteenfilter(value, that) {
      if (value === 0) {
        return '每月工资'
      }
      return "第" + (1 + value) + "批次工资"
    },
    statusFilter(type) {
      if (type === '0') {
        return '未生成'
      } else if (type === '1') {
        return '已生成'
      }
    }
  },
  props: ['tabPane'],
  data() {
    return {
      tableHeight: null,
      that: this,
      dialogEditFormVisible: false,
      dialogStatus: '',
      agencyBankLists: [], // 银行
      list: [],
      total: 0,
      payList: [],
      payListLoading: false,
      listLoading: true,
      object: {},
      sums: [],
      listQuery: {
        api: 'getProgressSalary',
        page: 1,
        limit: 500,
        flag: 'all',
        changeAgency: '',
        salaryType: '',
        agencyId: '0',
        agencySelected: '',
        salaCardBank: '',
        menuid: this.$router.currentRoute.meta.menuid,
        bizKey: '',
        isThirteen: ''
      },
      changeAgencys: [
        { code: '1', name: '有变动' },
        { code: '0', name: '无变动' }
      ],
      salaryTypes: [
        { code: '0', name: '行政人员' },
        { code: '1', name: '事业人员' },
        { code: '11', name: '离退休人员' }
      ],
      ifShowMessage: false,
      upload_load: false,
      selected_list: [] // 表格数据源
    }
  },
  watch: {
    list(val) {
      this.doLayout()
    },
    payList(val) {
      this.doPayLayout()
    }
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  // 加载后运行
  created() {
    // 获取参数
    this.listQuery.flag = this.tabPane
    // 加载获取全部数据
    this.getList()
    this.initBaseInfo()
  },
  methods: {
    show() {
      const selection = this.$refs.singalTable.selection

      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要生成工资数据的单位',
          type: 'warning',
          duration: 4000
        })
        this.$emit('makeSalaryDataCallback')
        return
      }

      if (this.listQuery.isThirteen === '' || this.listQuery.isThirteen === null || this.listQuery.isThirteen === undefined) {
        this.$message({
          showClose: true,
          message: '请选择批次',
          type: 'warning',
          duration: 4000
        })
        this.$emit('makeSalaryDataCallback')

        return
      }
      let sumAgency = 0
      let sumRealSalary = 0
      let personCount = 0
      const _that = this
      _that.listQuery.agencySelected = ''
      _that.listQuery.bizKey = ''
      sumAgency = selection.length

      //  selection.forEach(function(item, index){
      //     if(index===0){
      //    _that.listQuery.bizKey+=item.bizKey
      //    }else{
      //       _that.listQuery.bizKey+=','+item.bizKey

      //     }
      //   })
      _that.listQuery.isThirteen = this.listQuery.isThirteen
      selection.forEach(function (item, index) {
        if (item.no === '合计') {
          sumAgency -= 1
        } else {
          if (index === 0) {
            _that.listQuery.agencySelected += item.agencyId
            _that.listQuery.bizKey += item.bizKey


          } else {
            _that.listQuery.agencySelected += ',' + item.agencyId
            _that.listQuery.bizKey += ',' + item.bizKey
          }
          sumRealSalary += Number(item.realSalary)
          personCount += Number(item.personCount)
        }
      })
      //  console.log(_that.listQuery)
      this.object.agencyCount = sumAgency
      this.object.sumRealSalary = Number(sumRealSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
      this.object.personCount = personCount
      const h = this.$createElement;
      this.$msgbox({
        title: '是否确认生成',
        message: h('span', null, [
          h('span', { class: 'messagestyle' }, '当前生成单位数'),
          h('span', null, '\u3000:\u3000' + sumAgency),
          h('br', null,),
          h('span', { class: 'messagestyle' }, '当前生成金额'),
          h('span', null, '\u3000:\u3000' + Number(sumRealSalary).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")),
          h('br', null,),
          h('span', { class: 'messagestyle' }, '当前生成人数'),
          h('span', null, '\u3000:\u3000' + Number(personCount)),
        ]),
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done();
            this.ifShowMessage = false
            this.upload_load = true
            // this.makeSalaryData() // 进度条同时，调用接口
          } else {
            this.uploadClose()
            done();
          }
        }
      }).then(action => {

        // done();
        this.$emit('makeSalaryDataCallback')
        // this.$message({
        //   type: 'info',
        //   message: 'error: ' + action
        // });

      });

    },

    // 进度条走完，关闭弹窗，调用展示提示信息的方法
    uploadClose() {
      this.upload_load = false
      this.listQuery.agencySelected = ''//批量生成完后清空选择值，再调查询方法，否则会报414
      this.listQuery.bizKey = '' /
        this.getMessage()
      this.getList()
      this.$emit('makeSalaryDataCallback')
    },
    // 展示附件返回信息
    getMessage() {
      if (this.ifShowMessage) { // 成功
        this.$message({
          message: '生成成功',
          type: 'success',
          showClose: true,
          duration: 4000
        })
        this.handleQuery()
      }
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.singalTable.doLayout()
      })
    },
    doPayLayout() {
      this.$nextTick(() => {
        this.$refs.payTable.doLayout()
      })
    },
    getTbHeight() {
      // if (this.tabPane === '1') {
      //   this.tableHeight = window.innerHeight / 2 - 135
      // } else {
      this.tableHeight = window.innerHeight - 220
      // }
    },
    getList() {
      this.listLoading = true;
      queryGenerateSalaryDataPage(this.listQuery).then(response => {
        this.list = response.data.rows
        this.total = response.data.total
        this.listLoading = false
        this.setInitRow()
        this.$emit('checkloadCallback')
      })
    },
    checkSalaryData() {
      let that = this
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要校验工资数据的单位',
          type: 'warning',
          duration: 4000
        })
        this.$emit('checksalaryloadCallback')
        return
      }
      const operateAgency = []
      const operatebizkeys = []
      selection.forEach(item => {
        operateAgency.push(item.agencyId)
        operatebizkeys.push(item.bizKey)
      })
      const operateAgencys = {}
      operateAgencys['agencyIds'] = operateAgency
      operateAgencys['bizKeys'] = operatebizkeys
      operateAgencys['menuid'] = this.$router.currentRoute.meta.menuid
      operateAgencys['menuname'] = this.$router.currentRoute.meta.menuname
      checkSalaryData(operateAgencys).then(response => {
        if (response && response.rscode === '100000') {
          if (response.data.request) {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: response.data.request,
              type: 'warning',
              duration: 0
            })
          } else {
            this.$message({
              showClose: true,
              dangerouslyUseHTMLString: true,
              message: '检验完成！无失败单位',
              type: 'success',
              duration: 2000
            })
          }
          this.list.forEach(function (item, index) {
            if (that.isInArray(response.data.data, item.agencyId)) {
              item["contpay"] = 1
              that.$set(that.list, index, item)

            }

          })
          this.$emit('checksalaryloadCallback')
        } else {
          this.$emit('checksalaryloadCallback')
        }
      })
        .catch(() => {
          this.upload_load = false;
          this.ifShowMessage = false;
          this.$emit('checksalaryloadCallback')
        })
    },
    // 暂存方法
    saveMonthEndStop() {
      const selection = this.$refs.singalTable.selection
      console.log(selection)
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要暂存的单位',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.agencyVerList = []
      selection.forEach(item => {
        const current = {}
        current['agencyId'] = item.agencyId
        current['bizKey'] = item.bizKey
        this.agencyVerList.push(current)
      })
      console.log(this.agencyVerList)
      saveMonthEndStop(this.agencyVerList).then(response => {
        this.$message({
          showClose: true,
          message: '暂存成功',
          type: 'success',
          duration: 4000
        })
        this.getList()
        this.$emit('monthEndStopCallback')
        this.listQuery.page = 1

      })
        .catch(() => {
          //  this.uploadClose();
          this.handleFilter()
          this.$emit('monthEndStopCallback')
        })
    },
    // 撤销暂存
    revokeMonthEndStop() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销暂存的数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeMonthEndStopCallback')
        return
      }

      if (selection.length >= 2) {
        this.$message({
          showClose: true,
          message: '请选择一条要撤销的数据',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeMonthEndStopCallback')
        return
      }
      const operateAgencyId = []
      let month = ''
      selection.forEach(item => {
        operateAgencyId.push(item.agencyId)
        month = item.month
      })
      // 校验是否可以撤销暂存
      const params = { 'month': month, 'agencyIds': operateAgencyId.join(',') }
      checkRevokeMonthEndStop(params).then((response) => {
        if (response.data.flag === false) {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeMonthEndStopCallback')
        } else if (response.data.flag === true) {
          const data = { 'month': month, 'agencyIds': operateAgencyId }
          revokeMonthEndStop(data).then((response) => {
            this.$message({
              showClose: true,
              message: '撤销暂存成功',
              type: 'success',
              duration: 4000
            })
            this.$emit('revokeMonthEndStopCallback')
            this.listQuery.page = 1
            this.getList()
          }).catch(() => {
            this.$emit('revokeMonthEndStopCallback')
          })
        }
      }).catch(() => {
        this.$emit('revokeMonthEndStopCallback')
      })
    },

    //判断集合中是否存在某值的方法
    isInArray(arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true;
        }
      }
      return false;
    },
    // 获取银行基础数据
    initBaseInfo() {
      getAgencyBank().then(response => {
        this.agencyBankLists = Object.assign({}, response.data)
      })
    },
    // 审核说明
    processnode() {
      const selection = this.$refs.singalTable.selection

      if (!selection[0].id) {
        selection.splice(0, 1)
      }
      if (selection.length !== 1) {
        this.$message({
          showClose: true,
          message: '请选择一条数据',
          type: 'warning',
          duration: 4000
        })
        return
      }
      this.$refs.app.getList(selection[0].bizKey)
    },
    // 查询
    query() {
      this.dialogStatus = '查询'
      this.dialogEditFormVisible = true
    },
    // 查询
    handleQuery() {
      this.listQuery.page = 1
      // this.listQuery.limit = 10
      this.$emit('setCloec')
      this.getList()
      this.dialogEditFormVisible = false
    },
    // 查询
    handleQueryBank(val, batch) {
      this.listQuery.salaCardBank = val
      this.listQuery.page = 1
      this.listQuery.isThirteen = batch
      // this.listQuery.limit = 10
      this.getList()
      this.dialogEditFormVisible = false
    },
    // 树查询
    handleTree(data) {
      this.listQuery.page = 1
      // this.listQuery.limit = 10
      this.listQuery.agencyId = data.id
      this.getList()
    },
    // 生成工资数据
    makeSalaryData() {
      if (this.listQuery.isThirteen === '' || this.listQuery.isThirteen === null || this.listQuery.isThirteen === undefined) {
        this.$message({
          showClose: true,
          message: '请选择批次',
          type: 'warning',
          duration: 4000
        })
        return
      }
      const selection = this.$refs.singalTable.selection
      selection.forEach(item => {
        item.menuid = this.$router.currentRoute.meta.menuid
        item.menuname = this.$router.currentRoute.meta.menuname
        item.isThirteen = this.listQuery.isThirteen
      })

      makeSalaryData(selection).then(response => {
        if (response && response.rscode === '100000') {
          this.ifShowMessage = true
          this.$refs.uploadLoadSuccess.getSuccessNum()
          this.handleQuery()
          this.uploadClose()
        } else {
          this.upload_load = false
          this.ifShowMessage = false
          this.uploadClose()
        }
      })
        .catch(() => {
          this.upload_load = false;
          this.ifShowMessage = false;
          this.uploadClose()
        })

    },
    // 撤销生成
    revokeSalaryData() {
      const selection = this.$refs.singalTable.selection
      if (selection.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择要撤销生成的单位',
          type: 'warning',
          duration: 4000
        })
        this.$emit('revokeSalaryDataCallback')
        return
      }
      const operateAgency = []
      const agencyIds = []
      selection.forEach(item => {
        operateAgency.push(item.agencyId)
        agencyIds.push(item.agencyId)
      })
      const parms = { 'agencyIds': operateAgency.join(',') }
      // 判断是否生成银行数据，如果生成则不允许撤销
      getBankDataStatus(parms).then((response) => {
        if (response.data === true) {
          this.$message({
            showClose: true,
            message: '已上传银行数据，不允许撤销',
            type: 'warning',
            duration: 4000
          })
          this.$emit('revokeSalaryDataCallback')
        } else {
          // this.$confirm('确定撤销生成吗?', '提示', {
          //   closeOnClickModal: false,
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // })
          //   .then(() => {
          const data = {}
          data['agencyIds'] = agencyIds
          data['menuid'] = this.$router.currentRoute.meta.menuid
          data['menuname'] = this.$router.currentRoute.meta.menuname
          revokeSalaryData(data)
            .then(response => {
              this.$message({
                showClose: true,
                message: '撤销生成成功',
                type: 'success',
                duration: 4000
              })
              this.handleQuery()
              this.payList = []
              this.$emit('revokeSalaryDataCallback')
            })
            .catch(e => {
              console.error(e)
              this.$emit('revokeSalaryDataCallback')
            })
          // })
          // .catch(e => {
          //   console.error(e)
          //   this.$emit('revokeSalaryDataCallback')
          // })
        }
      })
    },
    // 设置工资列表初始选择
    setInitRow() {
      if (this.tabPane === '1') {
        this.$refs.singalTable.setCurrentRow(this.list[1])
      }
    },
    // 查询支付申请单列表
    queryPayBackData(row) {
      const query = {}
      query['agencyId'] = row.agencyId
      query['salaryMonth'] = row.month
      this.payListLoading = true
      getPayBackData(query).then(response => {
        this.payList = response.data
        this.payListLoading = false
      })
    },
    // 获取勾选的数据data
    handleSelectionChange(val) {
      this.selected_list = val;

    },
    //自定义合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计';
          return;
        }
        if (index < 7) {
          return;
        }
        let values;
        values = data.map(item => Number(item[column.property])); // 无勾选
        if (this.selected_list && this.selected_list.length > 0) { // 有勾选
          values = this.selected_list.map(item => Number(item[column.property]));
        }
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index != 9) {
            sums[index] = Number(sums[index]).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
            sums[index] += ' 元';
          } else {
            sums[index] += ' 人';
          }

        } else {
          sums[index] = 'N/A';
        }
      });

      return sums;
    }
  }
}
</script>

<style scoped>
.messagestyle {
  width: 110px;
  text-align: justify;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.messagestyle:after {
  display: inline-block;
  width: 100%;
  content: " ";
  height: 0px;
}
</style>
